<template>
  <s-tabs v-bind="attrs" style="width: 100%">
    <a-tab-pane
      v-for="(element, index) in fakeItems"
      :key="index + ''"
      :force-render="true"
      :tab="element.label"
    >
      <div :style="{ height: extendAttrs.height }">
        <s-scroll>
          <a-row>
            <dynamic-form
              ref="item"
              :form="form"
              :items="element.items"
              :disable-item="disableItem"
              @change="
                (v) => {
                  $emit('change', v)
                }
              "
            >
              <template #item="{ properties, type }">
                <slot name="item" :properties="properties" :type="type"></slot>
              </template>
            </dynamic-form>
          </a-row>
        </s-scroll>
      </div>
    </a-tab-pane>
  </s-tabs>
</template>
<script>
import BaseItem from './BaseItem.js'
import { defineAsyncComponent } from 'vue'
export default {
  name: 'TabItem',
  components: {
    DynamicForm: defineAsyncComponent(() => import('@/components/extends/dynamicForm/index.vue'))
  },
  extends: BaseItem,
  emits: ['change'],
  data() {
    return {
      fakeItems: this.children
    }
  },
  methods: {
    getRefByKey(key) {
      for (let i = 0; i < this.$refs.item.length; i++) {
        const item = this.$refs.item[i]
        const realItem = item.getRefByKey(key)
        if (realItem != null) {
          return realItem
        }
      }
      return null
    }
  }
}
</script>
